<template>
    <div class="not-found">
      <h1>您访问的页面不存在。</h1>

      <img :src="Page404" alt="404 Image" />
      <br/>
      <button @click="goToHome">返回首页</button>
    </div>
  </template>
  
  <script>

  import  Page404  from '@/assets/images/404.jpg';
  // console.log(Page404)
  export default {
    name: 'NotFound',
    data(){
      return {
        Page404
      }
    },
    methods: {
      goToHome() {
        this.$router.push({ path: '/' });
      }
    }
  }
  </script>
  
  <style scoped>
  .not-found {
    text-align: center;
    margin-top: 50px;
    padding-bottom: 30px;
  }
  
  .not-found h1 {
    font-size: 36px;
    color: #ff4d4f;
  }
  
  .not-found p {
    font-size: 18px;
    color: #666;
  }
  
  .not-found img {
    max-width: 100%;
    height: auto;
    margin: 20px 0;
  }
  
  .not-found button {
    padding: 10px 20px;
    font-size: 16px;
    color: #fff;
    background-color: #1890ff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
  
  .not-found button:hover {
    background-color: #40a9ff;
  }
  </style>